import { Button, Table, Checkbox, Modal, Form, Input, InputNumber, Flex, message, Upload } from 'antd';
import axios from '../../axios';
import { LoadingOutlined, PlusOutlined } from "@ant-design/icons"
import { useEffect, useState, } from 'react';
const getBase64 = (file) =>
    new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result);
        reader.onerror = (error) => reject(error);
    });
function UserRank() {
    const [form] = Form.useForm();
    const [total, setTotal] = useState(0)
    const [pages, setPage] = useState(1)
    const [limits, setlimit] = useState(20)
    const [list, setList] = useState([])
    const getlist = async () => {
        let res = await axios.get("/system/user/level/list", {
            params: {
                page: pages,
                limit: limits,
                temp: new Date().getTime(),
            }
        })
        setList(res)
        console.log(res);
        // setTotal(total)
        // setPage(page)
        // setlimit(limit)
    }
    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: "id"
        },
        {
            title: '等级图标',
            dataIndex: 'icon',
            key: "icon",
        },
        {
            title: '等级名称',
            dataIndex: 'name',
            key: "name",
        },
        {
            title: '经验',
            dataIndex: 'experience',
            key: "experience",
        },
        {
            title: '折扣',
            dataIndex: 'discount',
            key: "discount",
        },
        {
            title: '状态',
            dataIndex: 'isShow',
            key: "isShow",
            render: (_, row) => <>{row.isShow ? "开启" : "关闭"}</>
        },

        {
            title: '操作',
            dataIndex: '',
            key: "x",

        },

    ];



    const [isModalOpen, setIsModalOpen] = useState(false);
    const showModal = () => {
        setIsModalOpen(true);
    };

    const handleCancel = () => {
        form.resetFields();
        setFileList([])
        setIsModalOpen(false);
    };

    const onReset = () => {
        form.resetFields();
    };


    const onFinish = async (values) => {
        console.log('Success:', values);

        let res = await axios.post("/system/user/level/save", {// 添加用户的等级
            discount: values.discount,
            experience: values.experience,
            grade: values.grade,
            icon: values.icon,
            name: values.name,
            isShow: true
        })
        console.log(res);
        form.resetFields();
        setFileList([])
        getlist()
        setIsModalOpen(false);
    };
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    useEffect(() => {
        getlist()
    }, [pages])

    const onChangePage = (a, b) => {
        console.log(a, b);
        setPage(a)
    }
    //图片
    const [previewOpen, setPreviewOpen] = useState(false);
    const [previewImage, setPreviewImage] = useState('');
    const [fileList, setFileList] = useState([]);
    const handlePreview = async (file) => {
        if (!file.url && !file.preview) {
            file.preview = await getBase64(file.originFileObj);
        }
        setPreviewImage(file.url || file.preview);
        setPreviewOpen(true);
    };
    const handleChange = ({ fileList: newFileList }) => {
        console.log(newFileList);
        setFileList(newFileList)
    }

    const uploadButton = (
        <button
            style={{
                border: 0,
                background: 'none',
            }}
            type="button"
        >
            <PlusOutlined />
            <div
                style={{
                    marginTop: 8,
                }}
            >
                Upload
            </div>
        </button>
    );



    return (<div className="whitebg">
        <Button type="primary" onClick={showModal}>
            添加用户标签
        </Button>

        <Table columns={columns} dataSource={list}

            rowKey="id"
        // pagination={{
        //     defaultCurrent: pages,
        //     showQuickJumper:true,
        //     showPrevNextJumpers:true,

        //     pageSize: limits,
        //     total: total,
        //     pageSizeOptions: [ 20, 50, 100],
        //     onChange: onChangePage
        // }}

        />
        <div>
            <Modal title=" 标签名称" open={isModalOpen} footer={null} onCancel={handleCancel}>
                <Form
                    form={form}
                    name="basic"
                    labelCol={{
                        span: 8,
                    }}
                    wrapperCol={{
                        span: 16,
                    }}
                    style={{
                        maxWidth: 600,
                    }}
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item
                        label="等级名称"

                        name="name"
                        rules={[
                            {
                                required: true,
                                message: '输入不能为空',
                            },
                        ]}
                    >
                        <Input placeholder=" 请输入标签名称" />
                    </Form.Item>
                    <Form.Item
                        label="等级"


                        name="grade"
                        rules={[
                            {
                                required: true,
                                message: '输入不能为空',
                            },
                        ]}
                    >
                        <InputNumber min={0} />
                    </Form.Item>
                    <Form.Item

                        label="折扣"

                        name="discount"
                        rules={[
                            {
                                required: true,
                                message: '输入不能为空',
                            },
                        ]}
                    >
                        <InputNumber min={0} />
                    </Form.Item>
                    <Form.Item

                        label="经验"

                        name="experience"
                        rules={[
                            {
                                required: true,
                                message: '输入不能为空',
                            },
                        ]}
                    >
                        <InputNumber min={0} />
                    </Form.Item>
                    <Form.Item

                        label="图片"

                    // name="icon"
                    // rules={[
                    //     {
                    //         required: true,
                    //         message: '输入不能为空',
                    //     },
                    // ]}
                    >
                        <Upload
                            name='multipart'
                            maxCount={1}
                            action="https://api.java.crmeb.net/api/admin/upload/image?model=user&pid=0"
                            listType="picture-circle"
                            fileList={fileList}
                            onPreview={handlePreview}
                            onChange={handleChange}
                        >
                            {fileList.length >= 8 ? null : uploadButton}
                        </Upload>
                        {previewImage && (
                            <Image
                                wrapperStyle={{
                                    display: 'none',
                                }}
                                preview={{
                                    visible: previewOpen,
                                    onVisibleChange: (visible) => setPreviewOpen(visible),
                                    afterOpenChange: (visible) => !visible && setPreviewImage(''),
                                }}
                                src={previewImage}
                            />
                        )}

                    </Form.Item>

                    <Form.Item
                        wrapperCol={{
                            offset: 8,
                            span: 16,
                        }}
                    >
                        <Button type="primary" htmlType="submit">
                            提交
                        </Button>
                        <Button htmlType="button" onClick={onReset}>
                            重置
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
        </div>

    </div>);
}

export default UserRank;